
<template >
	 <a-card class="centered" title="" style="width: 300px">
		<a-form :model="formState" ref="formRef" @finish="jump">
		  <!-- @finish="jump" 下面的js代码会提到 -->
		  <a-form-item :rules="[{validator: userNameCheck, trigger: 'blur'}]" name="userName">
		    <!-- form-item 必须加上 name 属性，且需要和 formState 中的属性同名 -->
		    <a-input
		        placeholder="请输入用户名"
		        v-model:value="formState.userName"
		    ></a-input>
		  </a-form-item>
		  <a-form-item name="passWord" :rules="[{validator: passWordCheck, trigger: 'blur'}]">
		    <!-- trigger=blur 会在输入框失焦时触发表单校验，=change会在点击登录时触发校验 -->
		    <a-input-password placeholder="请输入密码" v-model:value="formState.passWord"></a-input-password>
		  </a-form-item>
		  <a-form-item>
		    <a-button type="primary" html-type="submit">登录</a-button>
		    <!-- 只有填写了 html-type="submit" 才可以使按钮具有表单校验的功能，才可以使 @finsih属性生效 -->
		  </a-form-item>
		</a-form>
	</a-card>
 

</template>
<script lang="ts" setup>
import {FormInstance,message} from "ant-design-vue";
import {reactive, ref} from "vue";
import {Rule} from "ant-design-vue/es/form";
import {useRouter } from 'vue-router';
import { useGlobalStore } from '@/store';
  import { useLoading } from '@/hooks';
const { setLoading } = useLoading();
const formRef = ref<FormInstance>(); // 通过为 form 加上 ref 属性可以获取表单实例
  const router = useRouter();
// 定义表单域
const formState = reactive({
  userName: '',
  passWord: ''
});

// 用户名校验规则
const userNameCheck = async (_rule: Rule, value: string) => {
  if (!value) {
    return Promise.reject('用户名不能为空')
  } else if (value.length <= 2) {
    return Promise.reject('用户名长度不能小于两个字符')
  } else {
    return Promise.resolve()
  }
}

// 密码校验规则
const passWordCheck = async (_rule: Rule, value: string) => {
  if (!value) {
    return Promise.reject('密码不能为空')
  } else if (value.length < 5) {
    return Promise.reject('密码长度不能小于5个字符')
  } else {
    return Promise.resolve()
  }
}

// 登录
function jump(values:any){
	 const globalStore = useGlobalStore();
		setLoading(true, '登录中');
		setTimeout(() => {
		  setLoading(false);
		  message.success('登录成功');
		  globalStore.token=values.userName;
		  router.push('/table');
		}, 800);
		
}


</script>
<style>
	
	.centered {
	  position: fixed; /* 使用固定定位 */
	  top: 50%; /* 距离顶部50% */
	  left: 50%; /* 距离左边50% */
	  transform: translate(-50%, -50%); /* 使用transform进行微调 */
	  text-align: center; /* 文字居中 */
	}
</style>